<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <div class="list-table">
        <div class="area-header">
          <span class="area-header-title">{{ $t('募集方式') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('募集方式')">
              <el-radio-group v-model="form.amacType">
                <el-radio
                  v-for="dict in amacTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('募集机构名称')" prop="amacName" style="width:360px;">
              <el-input v-model="form.amacName" :placeholder="$t('募集机构名称')" maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('监督机构名称')" prop="supervisoryName" style="width:360px;">
              <el-input v-model="form.supervisoryName" :placeholder="$t('监督机构名称')" maxlength="100" />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <br>
      <div class="list-table">
        <div class="area-header">
          <span class="area-header-title">{{ $t('募集行为程序确认') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('推介产品前是否履行特定对象确定程序')">
              <el-radio-group v-model="form.isProductAffirm">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('是否按基金的投资标的、相关风险等因素实施投资者适当性原则匹配')">
              <el-radio-group v-model="form.isFundFactor">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('是否有风险揭示环节')">
              <el-radio-group v-model="form.isRiskWarning">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('是否有投资冷静期')">
              <el-radio-group v-model="form.isInvestorCalm">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('是否设置回访确认程序')">
              <el-radio-group v-model="form.isAffirmRoutine">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('是否提示投资者后续的回访确认程序')">
              <el-radio-group v-model="form.isHintRoutine">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <br>
      <div class="list-table">
        <div class="area-header">
          <span class="area-header-title">{{ $t('相关风险提示是否获得投资者如下承诺') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('是否依照《私募投资基金风险揭示书内容与格式指引》向投资者提示相关风险，并经投资者签字确认')">
              <el-radio-group v-model="form.isNormRiskSignature">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('投资者愿意承担由基金风险引发的全部后果')">
              <el-radio-group v-model="form.isBearFund">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('投资者知晓基金管理人、基金销售机构、基金托管人及相关机构不应当对基金财产的收益状况作出任何承诺与担保')">
              <el-radio-group v-model="form.isKnowPromise">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item runat="server">
              <template slot="label">
                <el-tooltip placement="top">
                  <div slot="content"> {{ $t('投资者已符合《私募投资基金监督管理暂行方法》有关合格投资者要求并已按照募集机构的要求提供相关证明文件按照募集机构的要求提供相关证明文件') }}</div>
                  <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis; ">{{ $t('投资者已符合《私募投资基金监督管理暂行方法》有关合格投资者要求并已按照募集机构的要求提供相关证明文件按照募集机构的要求提供相关证明文件') }}</div>
                </el-tooltip>
              </template>
              <el-radio-group v-model="form.isAccordWith">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('投资者知晓投资冷静期的制度安排以及在此期间的权力')">
              <el-radio-group v-model="form.isKnowDetails">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('投资者已认真阅读并完全理解基金合同中关于争议的处理的所有内容')">
              <el-radio-group v-model="form.isComprehendContent">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('投资者已知晓本私募基金产品不得非法拆分转让')">
              <el-radio-group v-model="form.isUnableMakeover">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('投资者知晓回访确认的制度安排以及在此期间的权利')">
              <el-radio-group v-model="form.isKnowAuthority">
                <el-radio
                  v-for="dict in isProductAffirmOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{ $t(dict.dictLabel) }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <br>
      <div class="list-table">
        <div class="area-header">
          <span class="area-header-title">{{ $t('银行账户') }}</span>
        </div>
        <el-table
          :data="form.amacRaiseAccountList"
          border
          class="nowrapTable formTable"
        >
          <el-table-column :label="$t('序号')" align="center" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('账户类型')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('账户类型') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'amacRaiseAccountList.' + scope.$index + '.accountType'" :rules="AccountListRules.accountType">
                <el-select
                  v-model="scope.row.accountType"
                  :placeholder="$t('请选择')"
                >
                  <el-option
                    v-for="dict in accountTypeOptions"
                    :key="dict.dictValue"
                    :label="$t(dict.dictLabel)"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('账户名称')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('账户名称') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'amacRaiseAccountList.' + scope.$index + '.accountName'" :rules="AccountListRules.accountName">
                <el-input v-model="scope.row.accountName" :maxlength="100" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('开户行')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('开户行') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'amacRaiseAccountList.' + scope.$index + '.openingBank'" :rules="AccountListRules.openingBank">
                <el-input v-model="scope.row.openingBank" :maxlength="100" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('账号')" align="center">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('账号') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'amacRaiseAccountList.' + scope.$index + '.account'" :rules="AccountListRules.account">
                <el-input v-model="scope.row.account" :maxlength="100" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" align="center" width="80">
            <template slot-scope="scope">
              <!--              <el-button size="small" type="text" icon="el-icon-delete" @click="delHandle(scope.$index, scope.row)">{{ $t('删除') }}</el-button>-->
              <el-button size="small" type="text" icon="el-icon-delete" @click="delHandle(scope.$index)">{{ $t('删除') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="tol">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addPayment">{{ $t("添加") }}</el-button>
        </div>
      </div>
      <br>
      <FileTable :list.sync="form.fileList" data-type="amac_raise" :business-id="autoBusinessId($route.query.id, form)" class="list-table" :btn-show="!otherBtnHide" />
    </el-form>
    <div slot="footer" class="dialog-footer" style="padding: 10px;">
      <!--保存 取消按钮-->
      <save-btn has-permi="raise:raise" :cancel-show="false" />
    </div>
  </div>
</template>
<script>
    import { saveAmacRaise, getAmacRaiseByFundId } from '@/api/fund/raise/amacRaise'
    export default {
        data() {
            return {
              otherBtnHide: false,
              accountTypeOptions: [],
              // 推介产品前是否履行特定对象确定程序字典
              isProductAffirmOptions: [],
              // 募集方式字典
              amacTypeOptions: [],
                // 表单参数
                form: {
                  // 上传
                  fileList: [],
                  // 银行账户
                  amacRaiseAccountList: []
                },
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {
                amacType: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                amacName: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                supervisoryName: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ]
                },
               AccountListRules: {
                 accountType: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                 accountName: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                 openingBank: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                 account: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }]
               }
            }
        },
         mounted() {
            this.$bus.$emit('async_done')
            },
        created() {
            this.getDicts('amac_type').then(response => {
                this.amacTypeOptions = response.data
            })
            this.getDicts('fund_account_type').then(response => {
                this.accountTypeOptions = response.data
            })
            this.getDicts('sys_yes_no').then(response => {
                this.isProductAffirmOptions = response.data
            })
        },
        methods: {
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                  getAmacRaiseByFundId(data.id).then(response => {
                      if (response.data != null) {
                        this.form = response.data
                      } else {
                        this.reset()
                      }
                      this.loading = false
                    })
                } else {
                    this.reset()
                    this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,

                    fundId: this.$route.query.id,

                    amacType: undefined,

                    amacName: undefined,

                    supervisoryName: undefined,

                    isProductAffirm: undefined,

                    isFundFactor: undefined,

                    isRiskWarning: undefined,

                    isInvestorCalm: undefined,

                    isAffirmRoutine: undefined,

                    isHintRoutine: undefined,

                    isNormRiskSignature: undefined,

                    isBearFund: undefined,

                    isKnowPromise: undefined,

                    isAccordWith: undefined,

                    isKnowDetails: undefined,

                    isComprehendContent: undefined,

                    isUnableMakeover: undefined,

                    isKnowAuthority: undefined,

                    amacRaiseAccountList: []
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                  this.loading = false
                // 关闭form页面
                  this.$parent.$parent.formOpen = false
                // 刷新list页面
                  this.$parent.$parent.getList()
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveAmacRaise(this.form).then(response => {
                            if (response.code === 200) {
                                this.form.id = response.data.id
                                this.msgSuccess(this.$t('保存成功'))
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        }).catch(() => {
                          this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                })
           },
          // 添加银行账户
          addPayment() {
            const row = {
              id: undefined,
              fundId: undefined,
              accountType: undefined,
              accountName: undefined,
              openingBank: undefined,
              account: undefined
            }
            if (!(this.form.amacRaiseAccountList instanceof Array)) {
              this.$set(this.form, 'amacRaiseAccountList', [])
            }
            this.$nextTick(() => {
              this.form.amacRaiseAccountList.push(row)
            })
          },
          // 删除银行账户
          // delHandle(index, row) {
          //   const id = row.id
          //   if (id !== undefined && id !== '' && id != null) {
          //     this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          //       confirmButtonText: this.$t('确定'),
          //       cancelButtonText: this.$t('取消'),
          //       type: 'warning'
          //     })
          //       .then(function() {
          //         return deleteAmacRaise(id)
          //       }).then(() => {
          //       this.form.amacRaiseAccountList.splice(index, 1)
          //       return this.msgSuccess(this.$t('删除成功'))
          //     })
          //       .catch(function() {})
          //   } else {
          //     this.form.amacRaiseAccountList.splice(index, 1)
          //   }
          // }
          delHandle(index) {
            this.form.amacRaiseAccountList.splice(index, 1)
          }
        }
    }
</script>
